<template>
    <div>
        <!-- 内容区域 -->
        <el-card class="cardBox">
            <el-table border style="width: 100%" :data="settleTab">
                <el-table-column prop="settlePayType" :label="$t('payrmethd')">
                </el-table-column>
                <el-table-column prop="settleType" :label="$t('setmethd')">
                </el-table-column>
                <el-table-column prop="sysGmtCreate" :label="$t('setldate')">
                </el-table-column>
                <el-table-column prop="status" :label="$t('sta')">
                </el-table-column>
                <el-table-column :label="$t('opratn')" width="100" fixed="right">
                    <template slot-scope="scope">
                        <el-link type="primary" @click="showedit(scope.row)">{{$t('mdfy')}}</el-link>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <el-dialog :title="$t('mdfy')" :visible.sync="editDialogVisible" width="30%" @close="editDialogVisibleClosed(editForm)" :close-on-click-modal='isOk' :modal-append-to-body="false">
           <el-form :ref="editForm" :rules="editRul" :model="editForm" label-width="80px" :hide-required-asterisk="true">
                <el-form-item :label="$t('setmethd')" prop="settleType">
                    <el-select v-model="editForm.settleType" :placeholder="$t('plsset')" size="mini" class="sellong">
                        <el-option label="T + 1" value="T02"></el-option>
                        <!-- <el-option :label="$t('daysettle')" value="T03"></el-option>
                        <el-option :label="$t('weeks')" value="T04"></el-option>
                        <el-option :label="$t('monthstate')" value="T05"></el-option> -->
                    </el-select>
                </el-form-item>
                 <!-- <el-form-item :label="$t('setldate')" prop="rateValue">
                    <el-input v-model.trim="editForm.settleDate"></el-input>
                </el-form-item> -->
                <el-form-item :label="$t('payrmethd')" prop="settlePayType">
                    <el-select v-model="editForm.settlePayType" :placeholder="$t('plsset')" size="mini" class="sellong">
                        <el-option :label="$t('automaticmon')" value="AUTO"></el-option>
                        <el-option :label="$t('manlpaymentsett')" value="MANUAL"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item :label="$t('sta')" prop="status">
                    <el-select v-model="editForm.status" :placeholder="$t('plsset')" class="sellong">
                        <el-option :label="$t('vlid')" value="VALID"></el-option>
                        <el-option :label="$t('invlid')" value="INVALID"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="edit(editForm)" v-preventReClick>{{$t('cfm')}}</el-button>
                <el-button @click="editDialogVisible = false" v-preventReClick>{{$t('cnl')}}</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import {
    getmersettlelist,
    addmersettle,
    modifymersettle,
    getsettlelist
} from '@/libs/reqlist.js'
export default {
    data () {
        return {
            isOk: false,
            merId: null,
            settleitem: {},
            settleTab: [],
            addForm: {
                bindId: '576788902891753472',
                merId: 0,
                settleDate: '',
                settlePayType: '',
                settleType: 'T03',
                status: 'VALID'
            },
            editForm: {
                bindId: '',
                merId: 0,
                settleDate: '',
                settlePayType: '',
                settleType: '',
                status: ''
            },
            editDialogVisible: false,
            editRul: {
                rateValue: [
                    { required: true, message: this.$t('ratecanety'), trigger: 'blur' }
                ]
            },
            merSettleInfoId: ''
        }
    },
    methods: {
        async getclearRulesList () {
            this.settleTab = []
            await getmersettlelist(JSON.stringify({ merId: this.merId })).then(res => {
                if (res.data.code === '000000') {
                    this.settleitem = res.data.data
                    if (this.settleitem.settlePayType === 'AUTO') this.settleitem.settlePayType = this.$t('automaticmon')
                    if (this.settleitem.settlePayType === 'MANUAL') this.settleitem.settlePayType = this.$t('manlpaymentsett')
                    if (this.settleitem.settlePayType === 'WITHDRAW') this.settleitem.settlePayType = this.$t('selfhelpwith')
                    if (this.settleitem.status === 'VALID') this.settleitem.status = this.$t('vlid')
                    if (this.settleitem.status === 'INVALID') this.settleitem.status = this.$t('invlid')
                    if (this.settleitem.settleType === 'T02') this.settleitem.settleType = 'T + 1'
                    this.settleTab.push(this.settleitem)
                    this.merSettleInfoId = res.data.data.merSettleInfoId
                }
            })
            getsettlelist(JSON.stringify({ merId: this.merId })).then(res => {
                if (res.data.code === '000000') {
                    this.editForm.bindId = res.data.data.bindId
                }
            })
        },
        seach () {
            this.settleTab = []
            this.getclearRulesList()
        },
        add () {
            addmersettle(JSON.stringify(this.addForm)).then(res => {})
        },
        showedit (data) {
            this.editForm.settlePayType = data.settlePayType
            this.editForm.settleType = data.settleType
            this.editForm.status = data.status
            this.editDialogVisible = true
        },
        edit (form) {
            this.$refs[form].validate((valid) => {
                if (!valid) {
                    return false
                }
                if (this.editForm.settlePayType === this.$t('automaticmon')) this.editForm.settlePayType = 'AUTO'
                if (this.editForm.settlePayType === this.$t('manlpaymentsett')) this.editForm.settlePayType = 'MANUAL'
                if (this.editForm.settlePayType === this.$t('selfhelpwith')) this.editForm.settlePayType = 'WITHDRAW'
                if (this.editForm.status === this.$t('vlid')) this.editForm.status = 'VALID'
                if (this.editForm.status === this.$t('invlid')) this.editForm.status = 'INVALID'
                modifymersettle(this.merSettleInfoId, JSON.stringify(this.editForm)).then(res => {
                    if (res.data.code === '000000') {
                        this.$message({
                            message: this.$t('modfunsuc'),
                            type: 'success'
                        })
                        this.editDialogVisible = false
                        // 重新刷新商户产品列表
                        this.getclearRulesList()
                    }
                })
            })
        },
        editDialogVisibleClosed (form) {
            this.addDialogVisible = false
            this.$refs[form].resetFields()
        }
    },
    mounted () {
        this.merId = window.sessionStorage.getItem('merId')
        this.addForm.merId = window.sessionStorage.getItem('merId')
        this.editForm.merId = window.sessionStorage.getItem('merId')
        this.getclearRulesList()
    },
    destroyed () {
        window.sessionStorage.removeItem('merId')
    }
}
</script>

<style lang="less" scoped>
@import './clearRulesList.less';
</style>
